<script lang="ts" setup>
import getAvatar from '@/utils/avatar'

defineOptions({ name: 'CellStudent' })

const props = withDefaults(defineProps<Props>(), {
  id: undefined,
  name: undefined,
  avatar: undefined,
  gender: undefined,
  phone: undefined,
  isLink: true,
})

interface Props {
  id?: string
  name?: string
  avatar?: string
  gender?: number
  phone?: string
  isLink?: boolean
}

const router = useRouter()
const onDetail = () => {
  router.push({ path: '/shop/enrollment/student/detail', query: { id: props.id } })
}
</script>

<template>
  <a-space direction="horizontal">
    <a-image width="38" height="38" :src="getAvatar(avatar, gender)" />
    <div>
      <a-link v-if="isLink" @click="onDetail">
        {{ name }}
      </a-link>
      <span v-else class="pl-4px">
        {{ name }}
      </span>
      <div class="pl-4px text-13px text-gray-5">
        {{ phone }}
      </div>
    </div>
  </a-space>
</template>

<style lang="less" scoped></style>
